<template>
    <!-- 工具条 start  -->
    <div class="epic-edit-toolbar flex items-center justify-between px-4">
        <div class="flex-1 h-full flex items-center">
            <div :title="item.title" class="epic-action-item h-90% px-10px flex items-center cursor-pointer"
                v-for="(item, index) in actionOptions" :class="{ disabled: item.disabled }" :key="index"
                @click="item.on">
                <EIcon :name="item.icon"></EIcon>
            </div>
        </div>

        <input type="file" ref="fileRef" accept=".json,.txt" v-show="false" @change="handleFileSelected">

        <div class="flex-1 h-full flex items-center justify-center">
            <div :title="item.title" class="epic-device-item h-90% px-10px flex items-center cursor-pointer"
                :class="{ checked: item.key === checkedKey }" v-for="item in deviceOptions" :key="item.key"
                @click="handleSetCanvas(item.key)">
                <EIcon :name="item.icon"></EIcon>
            </div>
        </div>
        <div class="flex-1 h-full flex items-center justify-end">

            <!-- 缩放操作 start  -->
            <div v-if="!disabledZoom" class="flex items-center ml-12px">
                <div class="pr-8px w-82px cursor-pointer">
                    <Select v-model:value="canvasScaleComuted" v-model="canvasScaleComuted"
                        :options="canvasScaleOptions" size="small"></Select>
                </div>
                <div class="w-90px cursor-pointer">
                    <Slider :min="0.6" :max="1.4" :step="0.01" :tooltip="false" v-model:value="canvasScale"
                        v-model="canvasScale" />
                </div>
            </div>
            <!-- 缩放操作 end  -->
        </div>
    </div>
    <EPreviewJson ref="previewJson" />
    <!-- 工具条 end  -->
</template>
<script lang="ts" setup>
import { useShareStore, pluginManager, revoke, deepCompareAndModify, convertKFormData } from "../../../../../utils";
import type { PageSchema, Designer } from '../../../../../types/epic-designer'
import { computed, inject, ref } from 'vue'
import EIcon from '../../../../icon'
import EPreviewJson from './previewJson.vue'

const Slider = pluginManager.getComponent('slider')
const Select = pluginManager.getComponent('select')

const { canvasScale, disabledZoom } = useShareStore()
const checkedKey = ref('pc')
const pageSchema = inject('pageSchema') as PageSchema
const designer = inject('designer') as Designer
const previewJson = ref<InstanceType<typeof EPreviewJson> | null>(null)

const deviceOptions = [
    {
        icon: 'icon-a-diannaotoubu',
        title: 'pc',
        key: 'pc'
    },
    {
        icon: 'icon-a-pingbantoubu',
        title: '平板',
        key: 'pad'
    },
    {
        icon: 'icon-a-shoujitoubu',
        title: '手机',
        key: 'mobile'
    },
]

const recordList = revoke.recordList
const undoList = revoke.undoList



const actionOptions = computed(() => {
    return [
        {
            icon: 'icon-daima1',
            title: '查看数据',
            on: () => handlePreview()
        },
        {
            icon: 'icon-shangchuan1',
            title: '导入数据',
            on: handleOpenFileSelector
        },
        {
            icon: 'icon-shanchu1',
            title: '清空',
            on: handleReset
        },
        {
            icon: 'icon-chexiao2x',
            title: '撤销',
            on: handleUndo,
            disabled: !recordList.value.length
        },
        {
            icon: 'icon-fanhui2x',
            title: '重做',
            on: handleRedo,
            disabled: !undoList.value.length
        },

    ]
})

const fileRef = ref<HTMLInputElement | null>(null)
const canvasScaleComuted = computed({
    get() {
        return `${(canvasScale.value * 100).toFixed(0)}%`
    },
    set(value) {
        canvasScale.value = Number(value)
    }
})

const canvasScaleOptions = [
    {
        label: "60%",
        value: "0.6",
    },
    {
        label: "80%",
        value: "0.8",
    },
    {
        label: "100%",
        value: "1.0",
    },
    {
        label: "120%",
        value: "1.2",
    },
    {
        label: "140%",
        value: "1.4",
    },
]

/**
 * 撤销操作
 */
function handleUndo() {
    const componentSchema = revoke.undo()
    if (!componentSchema) return
    deepCompareAndModify(pageSchema.schemas, componentSchema)
    designer.setCheckedNode(pageSchema.schemas[0])
}

/**
 * 重做操作
 */
function handleRedo() {
    const componentSchema = revoke.redo()
    if (!componentSchema) return
    deepCompareAndModify(pageSchema.schemas, componentSchema)
    designer.setCheckedNode(pageSchema.schemas[0])
}


/**
 * 重置页面数据
 */
function handleReset() {
    designer.reset()
}

// 预览数据
function handlePreview() {
    previewJson.value!.handleOpen()
}


/**
 * 打开文件选择器
 */
function handleOpenFileSelector() {
    fileRef.value?.click()
}

// 选择文件
function handleFileSelected(e) {
    const file = e.target.files?.[0]
    if (!file) return
    e.target.value = null

    // 通过json文件导入
    const reader = new FileReader();
    reader.readAsText(file);
    reader.onload = (res) => {
        handleImporttData(res.target?.result as string);

    };
}

/**
 * 导入数据
 */
function handleImporttData(content?: string) {
    // 导入JSON
    try {

        let schema = JSON.parse(content ?? '')
        if (!schema.schemas) {
            schema = convertKFormData(schema)
        }

        // 调用 deepCompareAndModify 函数比较 pageSchema 和传入的 schema，进行修改
        deepCompareAndModify(pageSchema, schema)


    } catch (error) {
        console.error(error);
    }
}

/**
 * 设置画布宽高
 * @param type
 */
function handleSetCanvas(type: string) {
    designer.handleToggleDeviceMode(type)
    checkedKey.value = type
    const canvasConfigs = {
        pc: {

        },
        pad: {
            width: '800px',
            mode:type
        },
        mobile: {
            width: '420px',
            mode:type
        },
    }

    pageSchema.canvas = canvasConfigs[type]
}



</script>
